<template>
  <section class="editData">
    <!-- <h3 class="main-title1">修改资料</h3> -->
    <div class="myCenter-main">
      <div class="top">
        <div class="title">
          修改个人资料
        </div>
        <div class="hr"></div>
      </div>
      <div class="data-main">
        <div class="form-main">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <div style="height: 30px;line-height: 30px;font-size: 20px;text-align: center;margin-bottom: 10px;">
              基本信息
            </div>
            <el-form-item label="手机号" prop="mobile">
              <el-input v-model="ruleForm.mobile" readonly></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="ruleForm.name" maxlength="10" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickName">
              <el-input v-model="ruleForm.nickName" maxlength="10" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input v-model.number="ruleForm.age"></el-input>
            </el-form-item>

            <el-form-item label="身份证号" prop="idCard">
              <el-input @input="change111($event)" v-model="ruleForm.idCard" maxlength="18"></el-input>
            </el-form-item>

            <el-form-item label="性别" prop="sex">
              <el-select v-model="ruleForm.sex" placeholder="请选择性别" :popper-append-to-body="false">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="邮箱" prop="email">
              <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>
            <el-form-item label="选择地址" prop="address">
              <el-cascader v-model="ruleForm.address" :options="options"
                :props="{ expandTrigger: 'hover' ,label:'areaName',value:'areaCode',children:'childList'}"
                @change="handleChange" placeholder="请选择城市"></el-cascader>
            </el-form-item>
            <el-form-item label="" prop="area5">
              <el-input v-model="ruleForm.area5" type="textarea" rows="4"></el-input>
            </el-form-item>
            <div style="height: 30px;line-height: 30px;font-size: 20px;text-align: center;margin-bottom: 10px;">
              单位信息
            </div>
            <el-form-item label="纳税识别号" prop="licenseNo">
              <el-input v-model="ruleForm.licenseNo"></el-input>
            </el-form-item>
            <el-form-item label="个人职级" prop="personalRank">
              <el-input v-model="ruleForm.personalRank"></el-input>
            </el-form-item>
            <el-form-item label="单位名称" prop="companyName">
              <el-input v-model="ruleForm.companyName"></el-input>
            </el-form-item>
            <el-form-item label="岗位名称" prop="jobName">
              <el-input v-model="ruleForm.jobName"></el-input>
            </el-form-item>
            <el-form-item label="部门名称" prop="officeName">
              <el-input v-model="ruleForm.officeName"></el-input>
            </el-form-item>
            <div class="aaa">
              <div style="height: 30px;line-height: 30px;font-size: 20px;text-align: center;margin-bottom: 30px;">
                图像信息
              </div>
              <div style="display: flex;justify-content: space-around;">
                <el-upload class="avatar-uploader" style="border-radius:0;" :class="addClass" action="" :show-file-list="false"
                  :auto-upload="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                  :on-change="changeface" v-loading="loading2" element-loading-text="人脸上传中"
                  element-loading-spinner="el-icon-loading">
                  <img v-if="ruleForm.face" :src="$axios.defaults.baseURL+ruleForm.face" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  <i v-if="ruleForm.face" class="el-icon-edit "></i>
                  <!-- <i class="iconfont iconVIP" v-show=" vipFlag"></i> -->
                  <span class="text">人脸信息</span>
                </el-upload>

                <el-upload class="avatar-uploader" style="border-radius:0;" :class="addClass1" action=""
                  :show-file-list="false" :auto-upload="false" :on-success="handleAvatarSuccess2"
                  :before-upload="beforeAvatarUpload" :on-change="change" v-loading="loading1"
                  element-loading-text="身份证上传中" element-loading-spinner="el-icon-loading">
                  <img v-if="ruleForm.idCardPhoto1" :src="$axios.defaults.baseURL+ruleForm.idCardPhoto1" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 130px;font-size: 24px;"></i>
                  <i v-if="ruleForm.idCardPhoto1" class="el-icon-edit "></i>
                  <!-- <i class="iconfont iconVIP" v-show=" vipFlag"></i> -->
                  <span class="text">身份证信息(正面)</span>
                </el-upload>

              </div>
            </div>
            <div class="sub">
              <div class="button" style="text-align: center;margin-bottom:20px;" @click="submitForm('ruleForm')">确认修改
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>

  </section>
</template>

<script>
  import $ from 'jquery'
  import {
    Notification
  } from 'element-ui';
  import Cookies from 'js-cookie'
  export default {
    components: {},
    data() {
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号'));
        } else {
          if (!(/^1[3456789]\d{9}$/.test(this.ruleForm.mobile))) {
            callback(new Error('请输入正确的手机号'));
          } else {
            callback();
          }
        }
      };
      return {
        loading1: false,
        loading2: false,
        addClass1: '',
        addClass: '',
        loading: false,
        muluList1: [],
        vipFlag: false,
        pageNo: 1,
        activeName: 'first',
        total: null,
        imgUrl: '',
        imgUrl1: '',
        content: {},
        options: [],
        idCardPhoto: '',
        ruleForm: {
          address: [],
          idCard: '',
        },
        props: {
          children: 'children',
          label: 'name'
        },
        rules: {
          licenseNo: [{
            required: false,
            message: '请填写纳税识别号',
            trigger: 'blur'
          }, ],
          companyName: [{
            required: false,
            message: '请填写单位名称',
            trigger: 'blur'
          }, ],
          officeName: [{
            required: false,
            message: '请填写部门名称',
            trigger: 'blur'
          }, ],
          personalRank: [{
            required: false,
            message: '请填写个人职级',
            trigger: 'blur'
          }, ],
          jobName: [{
            required: false,
            message: '请填写岗位名称',
            trigger: 'blur'
          }, ],
          name: [{
            required: true,
            message: '请填写姓名',
            trigger: 'blur'
          }, ],
          nickName: [{
            required: true,
            message: '请填写昵称',
            trigger: 'blur'
          }, ],
          age: [{
              required: false,
              message: '请填写年龄',
              trigger: 'blur'
            },
            {
              type: 'number',
              message: '年龄必须为数字'
            }
          ],
          idCard: [{
            required: true,
            message: '请填写身份证号码',
            trigger: 'blur'
          }, ],
          email: [{
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          }, ],
          area5: [{
            required: false,
            message: '请输入详细地址',
            trigger: 'blur'
          }, ],
          mobile: [{
            required: true,
            validator: validatePass2,
            trigger: 'blur'
          }, ],
          address: [{
            type: 'array',
            required: false,
            message: '请选择地址',
            trigger: 'change'
          }],
          sex: [{
            required: true,
            message: '请选择性别',
            trigger: 'change'
          }],
        },
        muluList1: [{
            videoName: '大大时代大时代'
          },
          {
            videoName: '大大时代大时代'
          },
          {
            videoName: '大大时代大时代'
          },
        ],
      }
    },
    computed: {

    },
    // head() {
    //   return {
    //     title: '个人资料',
    //     meta: [
    //       {
    //         hid: 'description',
    //         name: 'description',
    //         ccontent: '网校，黄山网校，在线学习，在线教育'
    //       },
    //       {
    //         hid: 'keywords',
    //         name: 'keywords',
    //         content: '网校，黄山网校，在线学习，在线教育'
    //       },
    //     ]
    //   }
    // },
    created() {
      this.options = require("@/common/area");

      //this.getArea();
      this.getData();
    },
    mounted() {

    },
    methods: {
      change111() {
        this.$forceUpdate();
      },
      change(file, fileList) {
        let that = this;
        var formdata = new FormData();
        formdata.append('file', file.raw);
        this.loading1 = true;
        this.$axios({
            url: '/f/userUpdateCardFlag',
            method: 'post',
            data: formdata,
            headers: {
              'Content-Type': 'multipart/form-data'
            },
          }).then((response) => {
            that.idCardPhoto = response.data.data;
            that.getData();
            that.$message.success('身份证照片已更新');
            // that.ruleForm.photo1 = response.data.data.location;
            // that.ruleForm.photo = that.$axios.defaults.baseURL+response.data.data.photo;
            that.loading1 = false;
            that.addClass1 = 'isbg';
            // Cookies.set("photo",that.imgUrl,{ expires: 1 });
            // that.$emit('imgChange',that.imgUrl);

          })
          .catch(function(error) {
            console.log(error);
            that.addClass1 = '';

            that.loading1 = false;
          })
      },
      changeface(file, fileList) {
        let that = this;
        var formdata = new FormData();
        formdata.append('file', file.raw);
        this.loading2 = true;
        this.$axios({
            url: '/cloud/uploadFace',
            method: 'post',
            data: formdata,
            headers: {
              'Content-Type': 'multipart/form-data'
            },
          }).then((response) => {
            //console.log(response,9999)

            that.$message.success('人脸已更新');
            // that.ruleForm.photo1 = response.data.data.location;
            that.ruleForm.face = response.data.data;
            that.loading2 = false;
            that.addClass = 'isbg';
            // Cookies.set("photo",that.imgUrl,{ expires: 1 });
            // that.$emit('imgChange',that.imgUrl);

          })
          .catch(function(error) {
            console.log(error);
            that.addClass = '';

            that.loading2 = false;
          })
      },
      handleAvatarSuccess() {

      },
      handleAvatarSuccess2(res, file) {
        console.log(res, 111)
        console.log(file, 222)
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handleClick() {

      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.saveData();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleChange(value) {
        console.log(value);
      },
      pageChange() {

      },
      saveData() {
        var area1, area2, area3, area4;
        area1 = this.ruleForm.address[0] ? this.ruleForm.address[0] : "";
        area2 = this.ruleForm.address[1] ? this.ruleForm.address[1] : "";
        area3 = this.ruleForm.address[2] ? this.ruleForm.address[2] : "";
        area4 = this.ruleForm.address[3] ? this.ruleForm.address[3] : "";
        if (!this.ruleForm.age) {
          this.ruleForm.age = '';
        }
        if (this.ruleForm.idCard != this.idCardPhoto) {
          this.$confirm('你输入的身份证号码和识别出来身份证号码不一致,继续操作将以填入的身份证号为准，是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let that = this;
            this.$axios.$post("/f/saveUserInfo?nickName=" + this.ruleForm.nickName + "&idCard=" + this.ruleForm
                .idCard + "&sex=" + this.ruleForm.sex + "&email=" + this.ruleForm.email + "&area1Code=" + area1 +
                "&area2Code=" + area2 + "&area3Code=" + area3 + "&area4Code=" + area4 + "&area5=" + this.ruleForm
                .area5 + "&licenseNo=" + this.ruleForm.licenseNo + "&companyName=" + this.ruleForm.companyName +
                "&officeName=" + this.ruleForm.officeName + "&personalRank=" + this.ruleForm.personalRank +
                "&jobName=" + this.ruleForm.jobName + "&age=" + this.ruleForm.age)
              .then(function(response) {
                Cookies.set("userData", JSON.stringify(response.data));
                Notification.success({
                  title: '提示',
                  message: "已保存"
                });
                that.$router.back(-1);

                that.$emit("changeImg")
              })
              .catch(function(error) {
                // handle error
                console.log(error);
              })
          }).catch(() => {
            return;
          });
        }else{
          let that = this;
          this.$axios.$post("/f/saveUserInfo?nickName=" + this.ruleForm.nickName + "&idCard=" + this.ruleForm
              .idCard + "&sex=" + this.ruleForm.sex + "&email=" + this.ruleForm.email + "&area1Code=" + area1 +
              "&area2Code=" + area2 + "&area3Code=" + area3 + "&area4Code=" + area4 + "&area5=" + this.ruleForm
              .area5 + "&licenseNo=" + this.ruleForm.licenseNo + "&companyName=" + this.ruleForm.companyName +
              "&officeName=" + this.ruleForm.officeName + "&personalRank=" + this.ruleForm.personalRank +
              "&jobName=" + this.ruleForm.jobName + "&age=" + this.ruleForm.age)
            .then(function(response) {
              Cookies.set("userData", JSON.stringify(response.data));
              Notification.success({
                title: '提示',
                message: "已保存"
              });
              that.$router.back(-1);

              that.$emit("changeImg")
            })
            .catch(function(error) {
              // handle error
              console.log(error);
            })
        }
      },
      getData() {
        let that = this;
        this.loading = true;
        this.$axios.$post("/f/userDetail")
          .then(function(response) {
            let arr = [];
            let data = response.data;
            data.photo1 = "";
            data.address = [];
            if (data.area1.areaCode != "") {
              data.address.push(data.area1.id)
            }
            if (data.area2.areaCode != "") {
              data.address.push(data.area2.id)
            }
            if (data.area3.areaCode != "") {
              data.address.push(data.area3.id)
            }
            if (data.area4.areaCode != "") {
              data.address.push(data.area4.id)
            }
            that.ruleForm = data;
            that.idCardPhoto = that.ruleForm.property1.idCard
            that.ruleForm.sex = String(that.ruleForm.sex);
            if (that.ruleForm.property1.idCard) {
              that.ruleForm.idCard = that.ruleForm.property1.idCard;
            }
            if (that.ruleForm.property1.idCardPhoto1) {
              that.ruleForm.idCardPhoto1 = that.ruleForm.property1.idCardPhoto1;
            }
            // that.ruleForm.idCardPhoto1 =that.$axios.defaults.baseURL + that.ruleForm.idCardPhoto1;
            // that.ruleForm.face =that.$axios.defaults.baseURL + that.ruleForm.face
            that.loading = false;
          })
          .catch(function(error) {
            // handle error
            console.log(error);
            that.loading = false;
          })
      },
      getArea() {
        let that = this;

        this.$axios.$get("/f/listArea")
          .then(function(response) {
            console.log(response, 11111)
            that.options = response.data;

          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },
    }
  }
</script>
<style lang="less">
  .editData {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding-top: 20px;
    float: left;

    .main-title1 {
      line-height: 20px;
      padding-left: 10px;
      margin-left: 40px;
      border-left: 4px solid #17a2b8;
      font-size: 16px;
      color: #17a2b8;
      font-weight: 500;
      width: 90%;
      margin-top: 20px;
    }

    .myCenter-main {
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;

      .top {
        width: 100%;
        // height: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
          // width: 100%;
          font-size: 24px;
          color: #0076CA;
        }

        .hr {
          width: 144px;
          height: 4px;
          background-color: #0076CA;
        }
      }

      .data-main {
        padding: 0 45px;

        .isbg {
          background: #000;

          .el-upload {
            border: 0 !important;
          }
        }

        .aaa {
          position: relative;

          .avatar-uploader {
            width: 130px;
            height: 130px;
            display: inline-block;
            border-radius: 50%;
            overflow: hidden;
            text-align: center;

            .text {
              display: block;
              width: 130px;
              text-align: center;
              position: absolute;
              line-height: 20px;
              font-size: 16px;
              color: #8c939d;
              top: 200px;
            }

            .el-icon-edit {
              position: relative;
              font-size: 30px;
              color: #fff;
              display: block;
              top: -75px;
            }

            .el-upload {
              width: 100%;
              height: 100%;
              background-color: #c7c7c7;

              .avatar {
                width: 100%;
                height: 100%;
                display: block;
              }

              .plus {
                font-size: 28px;
                color: #8c939d;
                width: 130px;
                height: 130px;
                line-height: 130px;
                text-align: center;
              }

            }
          }
        }

        .sub {
          width: 100%;
          height: 40px;
          display: flex;
          margin: 50px 0;
          justify-content: center;

          .button {
            width: 160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 16px;
            background: #0068b7;
            color: #ffffff;
            // margin-top: 50px;
            // float: left;
            cursor: pointer;
          }
        }

        .form-main {
          margin-left: 30px;
          width: calc(100% - 30px);
          box-sizing: border-box;
          padding-top: 30px;
          padding-bottom: 10px;

          .demo-ruleForm {
            width: 65%;
            max-width: 800px;

            .el-form-item__content {
              width: calc(100% - 100px) !important;
            }

            .el-select,
            .el-cascader {
              width: 100%;
            }
          }
        }
      }
    }
  }
</style>
